// 全局指令
// 插件定义
// 引入监听是否进入视口的函数
import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    // app就是代替了vue2中的vue参数
    app.directive('img-lazy', {
      // mounted等价于vue2的inserted：指令绑定的元素渲染完毕之后自动执行这个函数
      mounted (el, binding) {
        // el：就是使用自定义指令的这个DOM元素
        // binding: 是一个大对象，value属性是我们使用自定义指令绑定的那个数据
        // console.log(el)
        // console.log(binding.value)
        // 下面填写我们的自定义指令的逻辑代码

        // useIntersectionObserver这个方法就是监听元素是否进入视口，并做逻辑处理
        const { stop } = useIntersectionObserver(
          el, // 这里就是我们要监听的那个DOM元素，这里我们el就是要监听的DOM元素
          // 第二个参数回调函数，就是我们监听这个DOM元素以后要执行的逻辑代码
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting 就是判断是否进入视口位置的一个布尔值条件，true表示进入，false表示没有进入
            if (isIntersecting) {
              // 如果isIntersecting 进入了视口位置，那么就把el.src 赋值为binding.value
              el.src = binding.value
              // stop函数就是停止监听的函数，我们可以在某个条件结束后停止对其进行监听
              // 这里停止就是表示我们监听完一次以后图片请求回来之后就不需要再进行监听了，
              // 图片已经请求回来了，已经被浏览器缓存了，就不需要重新进行监听了
              stop()
            }
          })
      }
    })
  }
}
